<template>
  <view class="goods-item" @click="goTodetail(goods.goods_id)">
    <view class="goods-item-left">
      <!-- radio,uniapp官网组件 -->
      <!-- @click.stop="radioClick"阻止事件冒泡 -->
      <radio
        v-if="isShowRadio"
        :checked="goods.goods_state"
        color="#c00000"
        @click.stop="radioClick"
      >
      </radio>
      <image
        class="goods-pic"
        :src="goods.goods_small_logo || defaultImg"
        mode="scaleToFill"
      />
    </view>
    <!--  -->
    <view class="goods-item-right">
      <view class="goods-name">{{ goods.goods_name }}</view>
      <!-- @click.stop=""阻止事件冒泡,注意必须要 -->
      <view class="goods-price-number" @click.stop="">
        <text class="goods-price">￥{{ goods.goods_price | toFix }}</text>
        <!-- uni-number-box官网组件,下面这些属性全部都是必填的  -->
        <!-- @change,输入框值改变时触发的事件，参数为输入框当前的 value -->
        <!-- :min="1" 小时值等于1 -->
        <uni-number-box
          v-if="isShowNumber"
          @change="bindNumber"
          :min="1"
          v-model="goods.goods_number"
        ></uni-number-box>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      default: () => {}
    },
    isShowRadio: {
      type: Boolean,
      default: false
    },
    isShowNumber: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      defaultImg:
        '//preview.qiantucdn.com/58pic/40/31/36/29q58PICEg9D33kyxa9s58PIC_PIC2018.png!w580_772_nowater'
    }
  },
  // 如果小数点后面没有就是得 00  有的话就保留两位用在了上面渲染时候的商品价格里面了
  filters: {
    toFix (val) {
      return Number(val).toFixed(2)
    }
  },
  methods: {
    //   点击跳转到，商品详情页面
    goTodetail (goods_id) {
      uni.navigateTo({
        url: '/subpkg/detail/index?goods_id=' + goods_id
      })
    },
    // radio的点击事件,点击更改状态
    radioClick () {
      // console.log('this.goods',this.goods) // 查看点击后数据的状态
      // 1,点后将需要修改的数据传递给父组件,src\pages\cart\index.vue
      // 2,然后父组件那边监听 @radio-change="radiochange"
      // 3,注意 radio标签内的 :checked="goods.goods_state"属性不能固定为true了, 需要改成goods.goods_state
      // 不建议在子组件去操作仓库的数据,因为子组件的复用性相对较高,如果有太多的逻辑在子组件,可能会导致后期调用子组件带来不必要的麻烦
      // 所以把值传递到父组件,又父组件去做对应的逻辑
      // radio-change 定义的事件名,
      this.$emit('radio-change', {
        // 商品id
        goods_id: this.goods.goods_id,
        // 商品状态
        goods_state: !this.goods.goods_state
      })
    },
    // 点击更改数量
    // @change,输入框值改变时触发的事件，参数为输入框当前的 value
    // uni-number定义的事件名
    bindNumber (value) {
      console.log('value', value)
      this.$emit('uni-number', {
        // 商品id
        goods_id: this.goods.goods_id,
        // 商品number(把change事件的value赋值给goods_number)
        goods_number: value
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-item {
  display: flex;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;

  .goods-item-left {
    margin-right: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .goods-pic {
      width: 100px;
      height: 100px;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 13px;
    }
    .goods-price-number {
      padding: 0px 10px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .goods-price {
        font-size: 16px;
        color: #c00000;
      }
    }
  }
}
</style>
